<!-- 库区库位编辑弹窗 -->
<template>
  <ele-modal
    form
    :width="480"
    :model-value="modelValue"
    title="打印库位标签"
    @opened="opened"
    @closed="closed"
    @update:model-value="updateModelValue"
  >
    <div id="printTable" class="print-list print-scroll">
      <div
        v-for="(item, i) in printList"
        :key="i"
        class="print-item"
        :class="`print${item.level > 2 ? item.level : 1}`"
      >
        <template v-if="item.level === 1">
          <div>
            <div class="print1-box">
              <div
                class="print1-name"
                :class="`print1-name-${item.name.length}`"
                :style="`--num: ${item.name.length + (isChina(item.name) ? 1 : 0)}`
                "
              >
                {{ item.name }}
              </div>
              <div class="print1-qr print-qr">
                <div :ref="el => elRefs[i] = el"></div>
              </div>
            </div>
            <div v-if="item.cate_names?.length" class="print1-cate">
              {{ item.cate_names.join('、') }}
            </div>
          </div>
        </template>
        <template v-else-if="item.level === 2">
          <div
            class="print2-name"
            :class="{
              'fs-120':
                Array.from(item.name).filter(
                  (v) => isChina(item.name) || v !== '-',
                ).length < 4,
              'fs-100':
                Array.from(item.name).filter(
                  (v) => isChina(item.name) || v !== '-',
                ).length === 4,
              'fs-70':
                Array.from(item.name).filter(
                  (v) => isChina(item.name) || v !== '-',
                ).length === 5,
              'fs-60':
                Array.from(item.name).filter(
                  (v) => isChina(item.name) || v !== '-',
                ).length === 6,
              'fs-50':
                Array.from(item.name).filter(
                  (v) => isChina(item.name) || v !== '-',
                ).length === 7,
              'fs-40':
                Array.from(item.name).filter(
                  (v) => isChina(item.name) || v !== '-',
                ).length > 7,
            }"
          >
            <span v-for="(text, t) in Array.from(item.name)" :key="t" :class="text === '-' ? 'print2-line' : ''">{{
              text
            }}</span>
          </div>
          <div class="print2-qr print-qr">
            <div :ref="el => elRefs[i] = el"></div>
          </div>
        </template>
        <template v-else-if="item.level === 3">
          <div class="print3-qr print-qr">
            <div :ref="el => elRefs[i] = el"></div>
          </div>
          <div
            class="print3-name"
            :style="`--num: ${item.name.length + (isChina(item.name) ? 1 : 0)}`"
          >
            {{ item.name }}
          </div>
        </template>
      </div>
    </div>
    <template #footer>
      <el-button @click="updateModelValue(false)">
        取消
      </el-button>
      <el-button type="primary" :loading="loading" @click="save">
        提交打印
      </el-button>
    </template>
  </ele-modal>
</template>

<script setup>
import print from 'print-js'
import QRCode from 'qrcodejs2-fixes'

const props = defineProps({
  /** 弹窗是否打开 */
  modelValue: Boolean,
  printList: {
    type: Array,
    default: () => [],
  },
})

const emit = defineEmits(['done', 'update:modelValue'])

const elRefs = ref([])

/** 提交状态 */
const loading = ref(false)

function creatQrCode(el, code) {
  nextTick(() => {
    new QRCode(el, {
      text: code, // 需要转换为二维码的内容
      width: 400,
      height: 400,
      colorDark: '#000000',
      colorLight: '#ffffff',
      correctLevel: QRCode.CorrectLevel.H,
    })
  })
}

function closed() {
  props.printList.forEach((v, i) => {
    elRefs.value[i].innerHTML = ''
  })
}

function opened() {
  props.printList.forEach((v, i) => {
    const code = v.print_code
    creatQrCode(elRefs.value[i], code)
  })
}

async function save() {
  loading.value = true
  const style
  = `@media print {
      @page {
        size: A4;
        margin: 0;
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
      }
      body {
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
      }
      .print-list {
        display: flex;
        flex-wrap: wrap;
        width: calc(2.8346pt * 210);
        color: #000;
        margin: 0 auto;
        background-color: #fff;
      }
      .print-item {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .print-qr {
        overflow: hidden;
      }
      .print-qr img {
        display: block;
        width: 100%;
        height: 100%;
      }
      .print1 {
        display: flex;
        align-items: center;
        width: 100%;
        height: calc(2.8346pt * 148.5);
      }
      .print1-box {
        display: flex;
        align-items: flex-end;
        justify-content: center;
      }
      .print1-cate {
        font-size: calc(2.8346pt * 11);
        text-align: center;
        margin-top: calc(2.8346pt * 8);
        padding: 0px calc(2.8346pt * 10);
      }
      .print1-name {
        font-size: calc(2.8346pt * 105 / var(--num) * (0.7 + var(--num) / 11));
        line-height: calc(2.8346pt * 105 / var(--num) * (0.7 + var(--num) / 11) * 0.9);
        font-weight: bold;
        margin-right: calc(2.8346pt * 5);
      }
      .print1-qr {
        height: calc(2.8346pt * 90);
        width: calc(2.8346pt * 90);
      }
      .print2-name {
        font-size: calc(2.8346pt * 60);
        font-weight: bold;
        display: flex;
        align-items: center;
      }
      .print2-line {
        font-size: calc(2.8346pt * 25);
      }
      .print2-qr {
        height: calc(2.8346pt * 60 * 1.2);
        width: calc(2.8346pt * 60 * 1.2);
        margin: 0 calc(2.8346pt * 5);
      }
      .print3 {
        height: calc(2.8346pt * 148.5);
        width: 50%;
        flex-direction: column;
      }
      .print3-name {
        font-size: calc(2.8346pt * 105 / var(--num) * 1.2);
        font-weight: bold;
        display: flex;
        align-items: center;
        margin-top: calc(2.8346pt * 2.5);
      }
      .print3-line {
        font-size: calc(2.8346pt * 15);
      }
      .print3-qr {
        height: calc(2.8346pt * 72 * 1.2);
        width: calc(2.8346pt * 72 * 1.2);
      }
      .fs-120 {
        font-size: calc(2.8346pt * 60 * 0.9);
      }

      .fs-100 {
        font-size: calc(2.8346pt * 50 * 0.9);
      }
      .fs-80 {
        font-size: calc(2.8346pt * 40 * 0.9);
      }
      .fs-72 {
        font-size: calc(2.8346pt * 36 * 0.9);
      }
      .fs-70 {
        font-size: calc(2.8346pt * 35 * 0.9);
      }
      .fs-60 {
        font-size: calc(2.8346pt * 30 * 0.9);
      }
      .fs-50 {
        font-size: calc(2.8346pt * 25 * 0.9);
      }
      .fs-40 {
        font-size: calc(2.8346pt * 20 * 0.9);
      }
    }`
  print({
    printable: 'printTable',
    type: 'html',
    header: null,
    targetStyles: ['*'],
    style,
    ignoreElements: ['no-print'],
    scanStyles: false,
  })
  await utils.sleep(1500)
  loading.value = false
}

function isChina(str) {
  const patrn = /[\u4E00-\u9FA5\uFE30-\uFFA0]/
  if (!patrn.exec(str)) {
    return false
  }
  else {
    return true
  }
}

/** 更新modelValue */
function updateModelValue(value) {
  emit('update:modelValue', value)
}
</script>

<style lang="scss">
.el-tree-node__content {
  height: 40px;
}
.print-scroll {
  max-height: 60vh;
  overflow-y: scroll;
}

.print-list {
  display: flex;
  flex-wrap: wrap;
  width: calc(2px * 210);
  color: #000;
  margin: 0 auto;
  background-color: #fff;
}
.print-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.print-qr {
  overflow: hidden;
}
.print-qr img {
  display: block;
  width: 100%;
  height: 100%;
}
.print1 {
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(2px * 148.5);
}
.print1-box {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.print1-cate {
  font-size: calc(2px * 11);
  text-align: center;
  margin-top: calc(2px * 8);
  padding: 0px calc(2px * 10);
}
.print1-name {
  font-size: calc(2px * 105 / var(--num) * (0.7 + var(--num) / 11));
  line-height: calc(2px * 105 / var(--num) * (0.7 + var(--num) / 11) * 0.9);
  font-weight: bold;
  margin-right: calc(2px * 5);
}
.print1-qr {
  height: calc(2px * 90);
  width: calc(2px * 90);
}
.print2-name {
  font-size: calc(2px * 60);
  font-weight: bold;
  display: flex;
  align-items: center;
}
.print2-line {
  font-size: calc(2px * 25);
}
.print2-qr {
  height: calc(2px * 60 * 1.2);
  width: calc(2px * 60 * 1.2);
  margin: 0 calc(2px * 5);
}
.print3 {
  height: calc(2px * 148.5);
  width: 50%;
  flex-direction: column;
}
.print3-name {
  font-size: calc(2px * 105 / var(--num) * 1.25);
  font-weight: bold;
  display: flex;
  align-items: center;
  margin-top: calc(2px * 2.5);
}
.print3-line {
  font-size: calc(2px * 15);
}
.print3-qr {
  height: calc(2px * 72 * 1.2);
  width: calc(2px * 72 * 1.2);
}
.fs-120 {
  font-size: calc(2px * 60 * 0.9);
}
.fs-100 {
  font-size: calc(2px * 50 * 0.9);
}
.fs-80 {
  font-size: calc(2px * 40 * 0.9);
}
.fs-70 {
  font-size: calc(2px * 35 * 0.9);
}
.fs-60 {
  font-size: calc(2px * 30 * 0.9);
}
.fs-50 {
  font-size: calc(2px * 25 * 0.9);
}
.fs-40 {
  font-size: calc(2px * 20 * 0.9);
}
</style>
